@charset "UTF-8";


/* reset */
/*html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    list-style:none;
    font-size:100%;
    font-style:normal;
    vertical-align:baseline;
    background:transparent;
    font-weight:normal;
}
* {-webkit-text-size-adjust: none;outline:0;}*/

/* Form */
legend{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0} 
select, textarea, input, label{vertical-align:middle}

/* Table */
table{border-collapse:collapse;}
caption{width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0}

/* bxslider */
/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */



/* layout */
#wrap {position:relative;width:auto;margin:0 auto;padding-top:90px;background:#e3e1e1;}
.s2 #wrap {padding-top:80px;}
.s1 #wrap {min-width:auto;background:#e3e1e1;}
#header {position:fixed;top:0;left:0;right:0;margin:0 auto;z-index:200;}
#header.fixed a{}
#header.logo a{width:139px;height:131px;background:transparent url(/web2018/images/common/logo.png) no-repeat; display:block; font-size:0;}
#header.fixed h1 a{background:transparent url(/web2018/images/common/fixed_logo.png) no-repeat;transition: all 0.3s ease;}
#header.fixed h2{ width:2px; height:18px; background-color:#000;overflow:hidden;position:absolute;top:38px;right:200px;}
#header.fixed h3 a{color:#444; }
#header.fixed h4 a{color:#fff; }
#header.fixed h4 a:hover {color:#0084ff}
#header.fixed h4 active > a {color:#0084ff}

.s1 #header {min-width:auto;}
#header .headerContainer {position:relative;height:93px;}
#gnb {position:relative;height:93px; margin:0 auto;text-align:center;font-size:0; border-bottom:1px solid #0087e6;}
#gnb .qr{ margin-top:10px; float:right;}
#gnb .gnbInner {width:1100px;height:93px;position:relative;margin:0 auto;z-index:100;}
.gnbInner .gnbMenuList {display:inline-block;margin-top:25px;}
.gnbInner .gnbMenuList:after {display:block;content:'';clear:both;}
.gnbTop h1 {position:absolute;top:10px;z-index:10}
.gnbTop h1 .h1Logo {display:block; margin-left:10px;}
.gnbTop h1 .hdSite {display:block;width:99px;position:absolute;left:228px;top:17px;}
.gnbTop h1 a img {}
.gnbTop .gnbBtn {display:none;}
.gnbMenuList > li {position:relative;float:left;padding:0 37px 0 37px;height:57px}
.gnbMenuList > li:first-child {display:none;}
.s2 .gnbMenuList > li:first-child {display:block;}
.gnbMenuList > li a {display:block;padding:12px 0 20px;font-family:'NanumGothic';font-size:15px; font-weight:600;text-align:left;color:#fff;}
.gnbMenuList > li > a:hover {color:#0084ff}
.gnbMenuList > li.active > a {color:#0084ff}
.gnbMenuList > li .depthBtn {display:none;}
.gnbMenuList > li .depth {display:none;position:absolute;top:75px;left:39px;z-index:100}
.gnbMenuList > li .depth li a {min-width:120px;font-family:'NanumGothic';font-size:14px;color:#999;letter-spacing:-.025em;line-height:1;padding:20px 0 0;z-index:100}
.gnbMenuList > li .depth li a:hover {color:#0084ff;}


#header .bar { width:2px; height:18px; background-color:#fff;overflow:hidden;position:absolute;top:38px;right:200px; display:none;}
#header .btnOther {overflow:hidden;position:absolute;top:35px;right:0px; padding-top:5px; border-left:1px solid #fff;}
#header .btnOther p{ padding:5px 10px; background:#0087e6; margin-top:-5px}
#header .btnOther a {display:block;position:relative;float:left;font-size:11px;color:#fff; padding:0 10px; font-family:NanumGothic; font-weight:600;}
#header .btnOther a:before {content:'';clear:both;position:absolute;left:0;top:0;width:0px;height:12px;background:#eee;}
#header .btnOther a:first-child:before {display:none;}



/* //20171120 */

.s3 .gnbMenuList > li {padding:0 32px 0 40px;}
.s3 .gnbMenuList > li .depth li a {font-size:13px;}
.s3 .gnbInner .gnbMenuListWrap {text-align: center;}
.s3 .gnbInner .gnbMenuList {margin-right:22px;}
.s3 .gnbTop h1 {top:0px;}
.s3 .gnbTop h1 .h1Logo {width:119px;}
.s3 .gnbTop h1 .hdSite {left:193px;top:17px;width:62px;}
.s3 .gnbMenuList > li .depth {left:40px;}

.s12 #gnb {height:100%;background-color:#fff;text-align:left;}
.s12 #gnb .gnbInner { width:100%;height:100%;}
.s12 .gnbInner .gnbTop {}
.s12 .gnbInner .gnbMenuListWrap { background-color:#f2f2f2;}
.s12 .gnbInner .gnbMenuList {display:block;margin-top:0;background-color:#fff;}
.s12 .gnbTop h1 .h1Logo {display:inline-block; margin-top:-10px;    transition: all 0.3s ease;}
.s12 .gnbTop .gnbBtn {position:absolute;display:block;cursor:pointer;}
.s12 .gnbTop .gnbBtn > i {position:absolute;left:0;display:block;height:2px;background-color:#763038;transition:all 0.5s;}
.s12 .gnbTop .gnbBtn > i.gBar1 {top:0;}
.s12 .gnbTop .gnbBtn > i.gBar3 {bottom:0;}
.s12 .gnbMenuList > li {position:relative;float:none;padding:0;overflow:hidden;}
.s12 .gnbMenuList > li .depthBtn {position:absolute;top:0;right:0;display:block;background:url(../images/btn_gnb_toggle.gif) no-repeat;text-indent:-99999px;cursor:pointer;}
.s12 .gnbMenuList > li .depth {position:static;display:block;}
.s2 .gnbMenuList > li .depth li a {max-width:inherit;padding:0;line-height:1;}
.s1 .gnbMenuList > li .depth li a {max-width:inherit;padding:0;line-height:1;font-family:'YouandiModernHEB';}
.s12 #header .bar { display:none;}
.s12 #header .btnOther {position:relative;top:0;background-color:#f2f2f2;}
.s12 #header .btnOther a {padding:0;color:#999;font-family:'YouandiModernHEB';}
.s1 #header.on .gnbTop .gnbBtn > i.gBar1 {transform:rotate(45deg);}
.s1 #header.on .gnbTop .gnbBtn > i.gBar2 {opacity:0;}
.s1 #header.on .gnbTop .gnbBtn > i.gBar3 {transform:rotate(-45deg);}
.s1 #header.on .gnbTop .gnbBtn i {background:#999;}

.msie8 #header {min-width:1024px;}
.msie8 #wrap {min-width:1024px;}

.s2 .gnbMenuList > li {padding-right:22px;border-top:1px solid #ebebeb;}
.s2 .gnbMenuList > li:first-child {border-top:0;}
.s2 .gnbMenuList > li.on > a {color:#99444b;}
.s2 .gnbMenuList > li .depth {padding-bottom:35px;}
.s2 .gnbInner .gnbMenuListWrap {text-align:right;}
.s2 .gnbMenuList > li .depth {left:30px;}
.s2 #header .headerContainer {height:80px;}
.s2 .gnbInner .gnbTop {height:80px;} 
.s2 .gnbInner .gnbMenuListWrap {position:fixed;top:0;right:-320px;width:320px;height:100%;z-index:130;overflow-y:scroll;}
.s2 .gnbInner .gnbMenuList {padding:67px 24px 81px 30px;}
.s2 .gnbTop h1 {top:23px;left:50%;margin-left:-360px;background:transparent url(/web2018/images/common/fixed_logo.png) no-repeat;transition: all 0.3s ease; z-index:100;}
.s2 .gnbTop h1 .h1Logo {width:213px;}
.s2 .gnbTop h1 .hdSite {top:17px;left:219px;width:95px;}
.s2 .gnbTop .gnbBtn {top:33px;right:50%;width:28px;height:18px;margin-right:-360px;}
.s2 .gnbTop .gnbBtn > i {width:28px;}
.s2 .gnbTop .gnbBtn > i.gBar2 {top:8px;}
.s2 .gnbMenuList > li {height:45px;}
.s2 .gnbMenuList > li:first-child {height:47px;}
.s2 .gnbMenuList > li > a {margin:14px 0 19px;padding:0;font-size:16px;color:#777;}
.s2 .gnbMenuList > li > a:hover,
.s2 .gnbMenuList > li > a:active {color:#99444b;}
.s2 .gnbMenuList > li:first-child > a {margin:16px 0 30px;}
.s2 .gnbMenuList > li .depthBtn {width:45px;height:45px;background-size:17px;background-position:right -49px;}
.s2 .gnbMenuList > li.on .depthBtn {background-position:right -96px;}
.s2 .gnbMenuList > li .depth li {margin-top:16px;}
.s2 .gnbMenuList > li .depth li:first-child {margin:0;}
.s2 .gnbMenuList > li .depth li a {font-size:14px;}
.s2 #header .btnOther {padding:30px;text-align:left;}
.s2 #header .btnOther a {float:none;margin-bottom:15px;font-size:13px;}
.tabletGnbBtn {display:none;position:absolute;top:30px;right:25px;width:22px;height:22px;background:url(../images/common/btn_gnb_close.png) no-repeat 0 0;z-index:140;cursor:pointer;}

.s1 #wrap {padding-top:58px;}
.s1 #header .headerContainer {height:58px;overflow:hidden;}
.s1 .gnbInner .gnbTop {height:58px;}
.s1 .gnbInner .gnbMenuList {padding:11px 22px 39px;}
.s1 .gnbTop h1 {top:12px;left:10px;}
.s1 .gnbTop h1 .h1Logo {width:134px;}
.s1 .gnbTop h1 .hdSite {top:10px;left:138px;width:60px;}
.s1 .gnbTop .gnbBtn {top:21px;right:20px;width:24px;height:16px;}
.s1 .gnbTop .gnbBtn > i {width:24px;}
.s1 .gnbTop .gnbBtn > i.gBar2 {top:7px;}
.s1 .gnbMenuList > li {height:62px;border-top:1px solid #ebebeb;}
.s1 .gnbMenuList > li:first-child {border:0;}
.s1 .gnbMenuList > li:first-child + li {border:0;}
.s1 .gnbMenuList > li.noDepth {height:62px;}
.s1 .gnbMenuList > li > a {padding:19px 0 23px;font-size:24px;color:#777;}
.s1 .gnbMenuList > li > h4 a {padding:19px 0 23px;font-size:24px;color:#777;}
.s1 .gnbMenuList > li > a:hover,
.s1 .gnbMenuList > li > a:active {color:#99444b;}
.s1 .gnbMenuList > li >h4 a:hover,
.s1 .gnbMenuList > li >h4 a:active {color:#99444b;}
.s1 .gnbMenuList > li.on > a {color:#99444b;}
.s1 .gnbMenuList > li.on > h4 a {color:#99444b;}
.s1 .gnbMenuList > li .depthBtn {width:62px;height:62px;background-size:20px;background-position:right -51px;}
.s1 .gnbMenuList > li.on .depthBtn {background-position:right 4px;}
.s1 .gnbMenuList > li .depth {padding:0 0 35px;}
.s1 .gnbMenuList > li .depth li {margin-top:18px;}
.s1 .gnbMenuList > li .depth li:first-child {margin:0;}
.s1 .gnbMenuList > li .depth li a {font-size:18px;color:#777;}
.s1 .gnbMenuList > li .depth li a:hover {color:#99444b;}
.s1 .gnbMenuList > li .depth li h4 a:hover {color:#99444b;}
.s1 #header .btnOther {margin-top:-1px;padding:21px 22px 95px;z-index:1;}
.s1 #header .btnOther a {font-size:16px;margin-bottom:14px;float:none;}
.s1 #header.on .headerContainer {height:auto;overflow-y:scroll;}
.s1 #header.on .gnbTop .gnbBtn > i.gBar1 {top:7px;}
.s1 #header.on .gnbTop .gnbBtn > i.gBar3 {bottom:7px;}



.gnbBack {display:none;overflow:hidden;position:absolute;top:93px;left:0;width:100%;margin:0 auto;z-index:90}
.gnbBack .inner {position:relative;margin:0;height:0;background:rgba(0,0,0,0.8);z-index:10;border-bottom:solid 1px #000;}
.gnbBack .inner .util {position:absolute;right:32px;top:21px}
.gnbBack .inner .util .btnTy4 {display:block;margin-top:4px}
.gnbBack .inner .util .btnTy4 a {width:148px;line-height:40px}
.bgOpa2 {display:block;position:absolute;top:0;left:0;bottom:0;right:0;background:url(../images/common/bg_opa2.png) 0 0;z-index:120}
.bgOpa2.none {display:none}

#header #gnb .depth.anistar li.ani01 {
-webkit-animation: depAni .3s ease 0s backwards;
animation: depAni .3s ease 0s backwards}
#header #gnb .depth.anistar li.ani02 {
-webkit-animation: depAni .3s ease 0.05s backwards;
animation: depAni .3s ease 0.05s backwards}
#header #gnb .depth.anistar li.ani03 {
-webkit-animation: depAni .3s ease 0.10s backwards;
animation: depAni .3s ease 0.10s backwards}
#header #gnb .depth.anistar li.ani04 {
-webkit-animation: depAni .3s ease 0.15s backwards;
animation: depAni .3s ease 0.15s backwards}
#header #gnb .depth.anistar li.ani05 {
-webkit-animation: depAni .3s ease 0.20s backwards;
animation: depAni .3s ease 0.20s backwards}
#header #gnb .depth.anistar li.ani06 {
-webkit-animation: depAni .3s ease 0.25s backwards;
animation: depAni .3s ease 0.20s backwards}
@media screen and (max-width:640px){
#header .btnOther {right:0px;}
#gnb .qr{ margin-top:5px; margin-left:10px; float:left}
.s1 #header .btnOther {padding:21px 22px 15px;}
.s1 .gnbTop h1 {top:-10px;left:10px;}
}


@-webkit-keyframes depAni{
    0%{opacity:0;-webkit-transform:translateY(20px)} 
    100%{opacity:1;-webkit-transform:translateY(0px)}}

@keyframes depAni{
    0%{opacity:0;transform:translateY(20px)} 
    100%{opacity:1;transform:translateY(0px)}}